<link rel="stylesheet" href="/css/user/list.css" />
<label>Search Box</label>
<div>
	<div class="input-group">
		<input type="text" class="form-control" name="id" placeholder="Search...">
		<span class="input-group-btn" onclick="search()"><button class="btn btn-default" type="button">Go!</button></span>
	</div>
</div>

<div class="table-responsive">
	<table class="table table-hover">
		<thead>
			<tr>
				<th>#<span class="caret reverse"></span></th>
				<th>User Name<span class="caret reverse"></span></th>
				<th>Nick Name<span class="caret reverse"></span></th>
				<th>Email<span class="caret reverse"></span></th>
				<th>Operate</th>
			</tr>
		</thead>
		<tbody>
			<% items.forEach(function(item) { %>
			<tr>
				<td>
					<%=item.id%>
				</td>
				<td>
					<%=item.username%>
				</td>
				<td>
					<%=item.nickname%>
				</td>
				<td>
					<%=item.email%>
				</td>
				<td>
					<button class="btn btn-info btn-edit" data-id="<%=item.id%>">Edit</button>
					<button class="btn btn-success" tabindex="0" role="button" data-placement="left" data-toggle="popover" data-trigger="hover" data-content="<img title=icon src='\uploads\user\<%=item.icon%>'\>">Pic</button>
					<button class="btn btn-primary btn-del" data-id="<%=item.id%>">Delete</button>
				</td>
			</tr>
			<%});%>
		</tbody>
	</table>
</div>
<script src="/js/user/list.js"></script>
<script>
	var _popDel = undefined;
	var _popDetail = undefined;
	var _btnAction = {
		delBtn: function(pop, id) {
			$("#" + pop.id).find("footer button:last-child").click(function() {
				del(id);
				pop.hide();
				list();
			});
			$("#" + pop.id).find("footer button:first-child").click(function() {
				pop.hide();
			})
		},
		editBtn: function(pop, id) {
			$("#" + pop.id).find("footer button:last-child").click(function() {
				var parent = $("#" + pop.id);
				var user = {
					id: id,
					username: parent.find('input[name=username]').val(),
					email: parent.find('input[name=email]').val(),
					nickname: parent.find('input[name=nickname]').val()
				}
				if(!$("#" + _popDetail.id+" form").valid()){
					return;					
				}
				edit(user);
				pop.hide();
				list();
			});
			$("#" + pop.id).find("footer button:first-child").click(function() {
				pop.hide();
			})
		}
	}

	function list() {
		$("ul.nav-tabs li.active").click();
	}

	function detail(id, cb) {
		$.ajax({
			type: "get",
			url: "/user/detail/" + id,
			success: function(data) {
				if(cb)
					cb(data);
			}
		});
	}

	function del(id, cb) {
		$.ajax({
			type: "post",
			url: "/user/del",
			data: {
				id: id
			},
			success: function(data) {
				if(cb)
					cb(data);
			}
		});
	}

	function edit(obj, cb) {
		$.ajax({
			type: "post",
			url: "/user/edit",
			data: {
				id: obj.id,
				username: obj.username,
				nickname: obj.nickname,
				email: obj.email
			},
			success: function(data) {
				if(cb)
					cb(data);
			}
		});
	}

	function search() {
		var id = $("input[name=id]").val();
		if(id === "") {
			list();
		} else {
			detail(id, function(item) {
				if(item != "" && item != undefined) {
					var tbody = $(".table tbody");
					var tr = $(document.createElement("tr"));
					tr.append("<td>" + item.id + "</td>");
					tr.append("<td>" + item.nickname + "</td>");
					tr.append("<td>" + item.username + "</td>");
					tr.append("<td>" + item.email + "</td>");
					tr.append("<td>" + initBtn(item.id, item.icon) + "</td>");
					tbody.html(tr);
					__resetTablePopover();
				} else {
					handleTips("User not found", true);
				}
			});

		}
	}

	$(".table tbody").on("click", ".btn-edit", function() {
		var id = $(this).data("id");
		detail(id, function(item) {
			var content = Popup.generateInput("User Name", "username", item.username);
			content += Popup.generateInput("Nick Name", "nickname", item.nickname);
			content += Popup.generateInput("Email", "email", item.email);
			content = "<form>"+content+"</form>";
			//content += Popup.generateInput("Password", "password", item.password);
			_popDetail = new Popup({
				"title": "Edit",
				"content": content,
				"footer": '<button type="button" class="btn btn-default">Close</button><button type="button" class="btn btn-primary">Submit</button>',
			});
			_popDetail.show();
			_btnAction.editBtn(_popDetail, id);

			var validate = function(selector) {
				$(selector).validate({
					rules: {
						username: {
							required: true
						},
						nickname: {
							required: true,
							maxlength: 10
						},
						email: {
							required: true,
							email: true
						}
					}
				});
			}
			validate("#" + _popDetail.id+" form");
		})
	});

	$(".table tbody").on("click", ".btn-del", function() {
		var id = $(this).data("id");
		_popDel.show();

		_btnAction.delBtn(_popDel, id);
	});

	$("input[name=id]").keydown(function(event) {
		if(event.keyCode == 13) {
			search();
		}
	});

	$(window).ready(function() {
		_popDel = new Popup({
			"title": "Are you sure to delete it?",
			"footer": '<button type="button" class="btn btn-default">Close</button><button type="button" class="btn btn-primary">Submit</button>',
		});
		__resetTablePopover();
	})
</script>